<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
}
iframe{
	border: none;
}
</style>
</head>
<body style="overflow: hidden;">
	
	<div style="position: absolute; width: 70%; height: 100%; top: 0;left: 0;" id="targetDiv">
	</div>
	<div style="position: absolute; width: calc(30% - 20px); height: 100%; right: 0; top: 0;">
		<div style="height: 50%; width: 100%;">
			<p>我的ID:<span id="myId"></span></p>
			<p>房间ID:<input type="text" id="targetId" placeholder="TARGET ID"/></p>
			<button id="open">开始通话</button>
		</div>
		<div style="height:calc(50% - 30px); width: 100%;">
			<iframe id="myIfi" style="width: 100%; height: 100%;"></iframe>
		</div>
	</div>
</body>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/lib/layer/layer.js" charset="utf-8"></script>
<script src="/static/js/stomp.js" type="text/javascript"></script>
<script src="/static/js/websocket.js" type="text/javascript"></script>
<script type="text/javascript">

	/* if(!IsPC()){
		window.location.href="/chat-mobile";
	} */

	var number=parseInt(Math.random() * (9999 - 1000 + 1) + 1000); 
	$("#myId").html(number);
	//房间人员
	var homeUsers = number;
	$("#open").click(function(){
		websocket.send("/topic/chat"+$("#targetId").val(),JSON.stringify({command:"request","id":number}));
	});
	
	$("#myIfi").attr("src","collection?id="+number);
	
	function init(w){
		w.subscribe("/topic/chat"+number,function(msg){
			var data=JSON.parse(msg.body);
			switch(data.command){
				case "request":
					layer.open({
	            	    content: '用户'+data.id+"请求视频通话",
	            	    shadeClose:false,
	            	    btn: ['接收', '拒绝'],
	            	    btn1: function(index){
	            	    	homeUsers += ','+data.id;
	            	    	var users = homeUsers.split(',');
	            	    	for (i=0;i<users.length ;i++ ) {
	            	    		console.log(users[i])
	            	    		var userIframe = $('#'+users[i]).length;
								if(users[i] && users[i] != number){
									// 除自身外所有用户都需重新请求发送
									websocket.send("/topic/chat"+users[i],JSON.stringify({"command":"receive","id":homeUsers}));
									if(userIframe <= 0){
										$("#targetDiv").append('<iframe id="'+users[i]+'" style="width: 50%; height: 50%;" src="show?id='+users[i]+'"></iframe>');
									}
								}
							}
	            	    	layer.close(index); 
	            	    },
		            	btn2: function(index){
		            		websocket.send("/topic/chat"+data.id,JSON.stringify({"command":"noReceive"}));
		        	    }
	            	});
					break;
				case "receive":
					//判断是否存在多个用户在房间中，如果是多个用户则需要循环将用户加载
					homeUsers = data.id;
					var users = homeUsers.split(',');
					for (i=0;i<users.length ;i++ ) {
						console.log(users[i])
						var userIframe = $('#'+users[i]).length;
						if(users[i] && users[i] != number && userIframe <= 0){
							$("#targetDiv").append('<iframe id="'+users[i]+'" style="width: 50%; height: 50%;" src="show?id='+users[i]+'"></iframe>');
						}
					}
					break;
				case "noReceive":
					layer.msg('对方拒绝');
					break;
			}
		});
	}
	
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
</script>
</html>